import React from 'react';
import { connect } from 'react-redux'
const App = (props) => {
  console.log(props)
  return (
    <div>
      <button onClick={ () => { props.add() } }>加</button>
      { props.count }
      <button onClick={ () => { props.reduce() } }>减</button>
    </div>
  );
};
 
// mapStateToProps 和 mapDispatchToProps 的返回值在组件中 通过 props 访问即可
const mapStateToProps = (state) => { // mapStateToProps 函数，默认参数为state，必须含有返回值，返回的值就是App组件需要使用的状态
  return {
    count: state.count
  }
}
const mapDispatchToProps = (dispatch) => {// mapDispatchToProps 函数，默认参数为dispatch，必须含有返回值，返回的值就是App组件需要使用的业务逻辑
  return {
    add () {
      dispatch({ type: 'ADD_COUNT' })
    },
    reduce () {
      dispatch({ type: 'REDUCE_COUNT' })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App); // connect() 的返回值称之为高阶组件，但是一般人们会称 connect 为高阶组件
// fn(1)(2)(3) =====> 6   函数柯里化
// function fn (a) {
//   return function (b) {
//     return function (c) {
//       return a + b + c
//     }
//   }
// }